<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<title>商品详情</title>

	<link rel="stylesheet" href="css/goodsdetail.css" />

	<link href="css/bootstrap.css" rel="stylesheet">
	<link href="css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" href="css/mui.min(2).css" />
</head>
<body class="body" style="position: relative;">
<div class="container-fluid header">
	<div class="row">
		<div class="col-xs-12" style="border-bottom: 2px solid #DBDBDB;padding: 0px;">
			<div class="col-xs-1" style="padding: 0px;">
				<p class="tu1"><a href="javascript:history.go(-1)"><img src="img/尖括号.png" height="22px"/></a></p>
			</div>
			<div class="col-xs-1" style="padding: 0px;">
				<p class="tu2"><a href=""><img src="img/关闭.png" height="22px"></a></p>
			</div>
			<div class="col-xs-10" style="padding: 0px;">
				<p class="title">${shop.shopName} </p>
			</div>

		</div>
	</div>
</div>

<div class="lunbotu">
	<div id="tupian">
		<!--<#list imgList as img>
            <img src="img/${img}" width="100%" height="335px" class="tutu"/>
        </#list>-->
		<div class="wrapper" id="_wrapper">
			<div class="pic-box" id="_picBox">
				<ul id="ul">
					<#list imgList as img>
					<li><a href="#"><img src="img/${img}" width="414px" height="342px" style="margin-top: 30px;" alt=""></a></li>
				</#list>
				</ul>
				<div class="arro-wrap">
					<span class="arr-pre"><</span>
					<span class="arr-next">></span>
				</div>
			</div>
		</div>
	</div>
</div>

<div class="goodtitle">
	<p class="one">￥${shop.shopPrice}</p>
	<p class="two">价格 <del>￥${shop.shopYprice}</del></p>
	<p class="three"><span>${shop.shopName}</span><a href="" class="fenxiang"><img src="img/分享.png" width="16px"/> 分享</a></p>
	<p class="four">${shop.shopWell}</p>
	<p class="five"><span id=""><img src="img/盾牌.png" height="30px"/>有赞担保</span> &nbsp;&nbsp;  全程护航，请放心购买</p>
</div>

<p class="yunfei">运费<span>免运费</span><span>已售 ${shop.shopSold}</span></p>

<p class="yunfei">服务<span>收货后结算 · 线下门店 · 快递发货</span><span style="font-size: 25px;">></span></p>

<div class="dianjia">
	<p><img src="img/dianpu.png"/></p>
	<p>邻里邦<img src="img/qiye.png" height="25px"class="qiye"/><span class="qijian">旗舰</span></p>
	<p><a href="" class="guanzhu">关注店铺</a></p>
	<p><a href="" class="jindian">进店逛逛</a></p>
	<p><a href="" class="xianxia">线下门店<span style="font-size: 25px;">></span></a></p>
</div>

<div class="weini">
	<p>为你推荐<a href="">查看全部<span>></span></a></p>
	<ul class="tuijian">
		<#list houList as hou>
		<a href="goodsdetail?id=${hou.id}&shopDetails=${hou.shopDetails}">
			<li>
				<p><img src="img/${hou.shopImg}" width="100px" height="70px"/></p>
				<p>${hou.shopName}</p>
				<p>￥${hou.shopPrice}</p>
			</li>
		</a>
	</#list>


	</ul>
</div>

<div style="padding: 25px 0px;background-color: white;">

	<table class="maijia" style="background-color: white;border: 1px solid red;">
		<tr style="background-color: white;">
			<th>买家</th>
			<th>成交时间</th>
			<th>数量</th>
		</tr>
		<#list ordeList as ordes>
		<tr>
			<td>${ordes.userName}</td>
			<td>${ordes.orderTime}</td>
			<td>${ordes.orderNum}</td>
		</tr>
	</#list>
	<br />
	<tr>
		<td colspan="3"><a href="" class="chakan">查看更多</a></td>
	</tr>

	</table>

</div>


<div style="position: relative;background-color:white;top: -20px;padding-top: 20px;margin-top: 30px;">

	<hr style="border: 1px solid #DFDFDF;margin-top: 20px;"/>
	<p style="margin:20px auto;background-color:white;width: 30%;text-align: center;color: #8F8F94;line-height: 35px;position: absolute;top: 0px;left: 35%;z-index: 100;">商品详情</p>
	<#list imgList as img>
	<img src="img/${img}" width="100%" style="position: absolute;z-index: 100;"/>
	<p style="height: 395px;"></p>
</#list>
</div>
</div>
</div>
<div class="jiageshuoming" style="background-color:white;padding-top: 20px;position:relative;margin-top: -10px">
	<hr style="border: 1px solid #DFDFDF;" />
	<p style="margin:20px auto;background-color:white;width: 30%;text-align: center;color: #8F8F94;line-height: 35px;position: absolute;top: 0px;left: 35%;z-index: 100;">价格说明</p>
	<p><img src="img/jiageshuoming.jpg" width="94%" style="border-radius:10px ;" /></p>
</div>



<div class="jieshu">
	<ul class="dibu">
		<li><a href="" class="kef"><p><img src="img/消息1.png" width="20px"/></p>客服</a></li>
		<li><a href="" class="kef"><p><img src="img/购物车.png" width="20px"/></p>购物车</a></li>
		<li><button class="jiaru">加入购物车</button></li>
		<li><button class="liji" id="liji">立即购买</button></li>
	</ul>
</div>

<div class="yincang" id="xianshi" style="position: fixed;bottom: 0px;z-index: 200;">
	<form action="queren1?id=${shop.id}" method="post">
		<p><img src="img/${shop.shopImg}" width="60px" height="60px">￥${shop.shopPrice}</p>
		<p>
			<span>购买数量</span>
			<button type="button" class="jian">-</button>
			<input type="text" class="numm" value="1"/>
			<button type="button" class="add">+</button>
		</p>
		<button class="xiayibu1">下一步</button>
	</form>
</div>

<div class="huise">

</div>

<script type="text/javascript" src="js/mui.min.js" ></script>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">

	$(function(){

		$("#liji").click(function() {

			$(".yincang").slideToggle();
			$(".huise").show();
		});



		$(".huise").click(function() {
			$(".yincang").hide();
			$(".huise").hide();
		});


	})

	var addNum = function () {
		var num = 1;
		//加的效果
		$(".add").click(function(){
			var n=$(this).prev().val();
			num=parseInt(n)+1;
			if(num==0){ return ;}
			$(this).prev().val(num);
			localStorage.setItem("numm",num);
		});
		//减的效果
		$(".jian").click(function(){
			var n=$(this).next().val();
			num=parseInt(n)-1;
			if(num==0){ return}
			$(this).next().val(num);
			localStorage.setItem("numm",num);
		});
		num = $(".numm").val();
		localStorage.setItem("numm",num);
	}
	addNum();


</script>
<script type="text/javascript" src="js/jquery-3.2.1.js" ></script>
<script>
	// 获取元素
	var _wrapper = document.getElementById('_wrapper');
	var _picBox = document.getElementById('_picBox');
	var _arro = document.getElementsByClassName('arro-wrap')[0];
	var _arroSpans = _arro.children;
	var ul = document.getElementById('ul');
	var lis = ul.children;
	var timer = null;// 自动播放的定时器
	var target = 0;// 点击箭头时ul走的target
	var num = 0; // 播放张数
	var key = 0;// 小圆点

	// 创建元素
	var circl = document.createElement('div');
	circl.className = "circl";
	_picBox.appendChild(circl);
	for(var i = 0;i < lis.length -1; i++)
	{
		var span = document.createElement('span');
		circl.appendChild(span);
	}
	var spans = circl.children;
	spans[0].className = 'current';
	circl.style.marginLeft = - circl.offsetWidth / 2 + 'px';

	// 所有的span元素

	//鼠标经过arro盒子显示
	_picBox.onmouseover = function(){
		_arro.style.display = 'block';
	}
	_picBox.onmouseout = function(){
		_arro.style.display = 'none';
	}


	// 动画开始
	// 点击右箭头

	_arro.children[0].onclick = function(){
		target +=  _picBox.offsetWidth;
		if(num > 0)
		{
			num --;
		}
		if(target >= 0)
		{
			target = 0;
		}
		if(key > 0)
		{
			key--;
		}
		console.log(target);
		animate(ul,target);

	}
	// 点击左箭头
	_arro.children[1].onclick = function(){
		if(num < lis.length -2)// 5
		{
			num++;
		}
		target += (- _picBox.offsetWidth);
		if(target <= -1656)
		{
			target = -1656;
		}

		if(key < spans.length - 1)// key < 4      0 1 2 3 4
		{
			key++;
		}
		animate(ul,target);
	}

	// 动画函数
	function animate(obj,target){
		clearInterval(obj.timer);
		obj.timer = setInterval(function(){
			var speed  = (target - ul.offsetLeft ) / 10;
			speed =  (speed > 0)?Math.ceil(speed): Math.floor(speed);
			ul.style.left = ul.offsetLeft + speed + "px";
			if(ul.offsetLeft == target)
			{
				clearInterval(obj.timer);
			}
			for(var k = 0;k < lis.length -1 ;k++)
			{
				spans[k].className = "";
			}
			spans[key].className = 'current';
		},30);
	}


	function autoPlay(){
		num ++ ;// 播放张数 要播放6
		if(num < 5)
		{
			target = -num * _picBox.offsetWidth;// target更新
		}

		if(num > lis.length -1 )// num =  1 2 3 4 5
		{
			num = 1;// 让张数变为1张
			ul.style.left = 0 + 'px';
			target = -414;
		}
		console.log(target);
		key ++ ;// 小圆点
		if(key > spans.length -1) // key = 0 1 2 3 4
		{
			key = 0;
		}
		animate(ul,-num * _picBox.offsetWidth);
	}

</script>

</body>
</html>
